<template>
	<div class="city">
		<cityHeader></cityHeader>
		<citySearch :cities="cities"></citySearch>
		<cityList 
		:cities="cities" 
		:hotcities="hotcities"
		:letter="letter"
		>
		</cityList>
		<cityWord 
		:cities="cities"
		@change="handleLetterChange"

		></cityWord>
	</div>
</template>
<script>
import CityHeader from './common/header'
import CitySearch from './common/search'
import CityList from './common/list'
import CityWord from './common/word'
export default{
	components:{CityHeader,CitySearch,CityList,CityWord},
	data(){
		return{
			cities:{},
			hotcities:[],
			letter:''
		}
	},
	mounted(){
		this.getCityInfo();
	},
	methods:{
		getCityInfo(){
			this.$axios.get('/api/city.json').then((res)=>{
				console.log(res.data.data)
				this.cities=res.data.data.cities;
				this.hotcities=res.data.data.hotCities;


			})
		},
		handleLetterChange(letter){
			this.letter=letter;

		}
	}
}
</script>
<style lang="scss">
</style>